<template>
  <view class="settings">
    <uni-nav-bar 
      :status-bar="true"
      background-color="linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(245,250,255,1) 100%)"
      left-icon="left"
      title="通用设置"
      color="#1a1a1a"
      @clickLeft="back"
    />
    
    <view class="content">
      <!-- 账户设置 -->
      <view class="section">
        <text class="section-title">账户设置</text>
        <view class="decor-line"></view>
        <view class="settings-list">
          <view 
            class="setting-item" 
            :class="{ loading: loadingStates.profile }"
            @click="navigateTo('profile')"
          >
            <uni-icons type="person" size="24" color="#64b5f6"></uni-icons>
            <view class="setting-content">
              <text>修改个人信息</text>
              <text class="setting-desc">更新您的姓名、头像等资料</text>
            </view>
            <uni-icons type="right" size="20" color="#999"></uni-icons>
          </view>
          <view 
            class="setting-item" 
            :class="{ loading: loadingStates.password }"
            @click="navigateTo('password')"
          >
            <uni-icons type="lock" size="24" color="#64b5f6"></uni-icons>
            <view class="setting-content">
              <text>修改密码</text>
              <text class="setting-desc">定期更换密码更安全</text>
            </view>
            <uni-icons type="right" size="20" color="#999"></uni-icons>
          </view>
          <view 
            class="setting-item" 
            :class="{ loading: loadingStates.email }"
            @click="navigateTo('email')"
          >
            <uni-icons type="email" size="24" color="#64b5f6"></uni-icons>
            <view class="setting-content">
              <text>绑定邮箱</text>
              <text class="setting-desc">用于找回密码和接收通知</text>
            </view>
            <uni-icons type="right" size="20" color="#999"></uni-icons>
          </view>
        </view>
      </view>

      <!-- 通知设置 -->
      <view class="section">
        <text class="section-title">通知设置</text>
        <view class="decor-line"></view>
        <view class="settings-list">
          <view class="setting-item">
            <uni-icons type="bell" size="24" color="#64b5f6"></uni-icons>
            <view class="setting-content">
              <text>消息通知</text>
              <text class="setting-desc">接收新消息提醒</text>
            </view>
            <switch checked color="#64b5f6"></switch>
          </view>
          <view class="setting-item">
            <uni-icons type="notification" size="24" color="#64b5f6"></uni-icons>
            <view class="setting-content">
              <text>系统通知</text>
              <text class="setting-desc">接收系统更新提醒</text>
            </view>
            <switch checked color="#64b5f6"></switch>
          </view>
          <view class="setting-item">
            <uni-icons type="sound" size="24" color="#64b5f6"></uni-icons>
            <view class="setting-content">
              <text>声音提醒</text>
              <text class="setting-desc">开启通知提示音</text>
            </view>
            <switch color="#64b5f6"></switch>
          </view>
        </view>
      </view>

      <!-- 隐私设置 -->
      <view class="section">
        <text class="section-title">隐私设置</text>
        <view class="decor-line"></view>
        <view class="settings-list">
          <view class="setting-item">
            <uni-icons type="eye" size="24" color="#64b5f6"></uni-icons>
            <view class="setting-content">
              <text>公开个人资料</text>
              <text class="setting-desc">允许他人查看您的资料</text>
            </view>
            <switch color="#64b5f6"></switch>
          </view>
          <view class="setting-item">
            <uni-icons type="shield" size="24" color="#64b5f6"></uni-icons>
            <view class="setting-content">
              <text>数据收集</text>
              <text class="setting-desc">帮助我们改进产品</text>
            </view>
            <switch checked color="#64b5f6"></switch>
          </view>
          <view class="setting-item">
            <uni-icons type="delete" size="24" color="#64b5f6"></uni-icons>
            <view class="setting-content">
              <text>清除缓存</text>
              <text class="setting-desc">释放存储空间</text>
            </view>
            <button class="clear-btn" @click="clearCache">清除</button>
          </view>
        </view>
      </view>
			
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      loadingStates: {
        profile: false,
        password: false, 
        email: false
      },
      isDarkMode: false
    }
  },
  methods: {
    navigateTo(type) {
      let url = '';
      switch(type) {
        case 'profile':
          this.loadingStates.profile = true;
          url = '/pages/profile/index';
          break;
        case 'password':
          this.loadingStates.password = true;
          url = '/pages/password/index';
          break;
        case 'email':
          this.loadingStates.email = true;
          url = '/pages/email/index';
          break;
      }
      if(url) {
        uni.navigateTo({ 
          url,
          complete: () => {
            this.loadingStates.profile = false;
            this.loadingStates.password = false;
            this.loadingStates.email = false;
          }
        });
      }
    },
    toggleDarkMode(e) {
      this.isDarkMode = e.detail.value;
      this.applyTheme();
    },
    applyTheme() {
      const theme = this.isDarkMode ? 'dark' : 'light';
      document.documentElement.setAttribute('data-theme', theme);
    },
    clearCache() {
      uni.showLoading({ title: '清除中...' });
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({ title: '缓存已清除', icon: 'success' });
      }, 1500);
    },
    back() {
      uni.navigateBack()
    }
  },
  onBackPress() {
    uni.switchTab({
      url: '/pages/mine/index'
    })
    return true
  }
}
</script>

<style scoped lang="scss">
.settings {
  min-height: 100vh;
  padding: 20px;
  padding-top: calc(env(safe-area-inset-top) + 16px);
  background: linear-gradient(180deg, rgba(100,181,246,0.05) 0%, rgba(255,255,255,1) 100%);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 300px;
    background: linear-gradient(180deg, rgba(100,181,246,0.1) 0%, rgba(100,181,246,0) 100%);
    z-index: 0;
  }
}

::v-deep .uni-nav-bar {
  width: 100vw;
  left: 0;
  right: 0;
  margin-left: -20px;
  margin-right: -20px;
  font-size: 20px;
}

.content {
  margin-top: calc(env(safe-area-inset-top) + 16px);
  padding-top: 8px;
  position: relative;
  z-index: 1;
}

.section {
  margin-bottom: 32px;
}

.section-title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin-bottom: 8px;
}

.decor-line {
  position: absolute;
  left: 0;
  bottom: -8px;
  width: 120px;
  height: 4px;
  background: linear-gradient(90deg, #64b5f6 0%, #90caf9 100%);
  border-radius: 2px;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.settings-list {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 28px;
  padding: 24px;
  box-shadow: 0 12px 48px rgba(100,181,246,0.12);
  border: 1px solid rgba(100,181,246,0.15);
  margin-top: 24px;
  transition: all 0.3s ease;
  
  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 56px rgba(100,181,246,0.16);
  }
}

.setting-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 16px;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
  overflow: hidden;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, 
      rgba(100,181,246,0.05) 0%,
      rgba(100,181,246,0.02) 50%,
      rgba(100,181,246,0.05) 100%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  
  .uni-icons:not([type="right"]) {
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
  }
  
  &:hover {
    background: rgba(100,181,246,0.04);
    
    &::after {
      opacity: 1;
    }
    
    .uni-icons:not([type="right"]) {
      transform: scale(1.1);
      filter: drop-shadow(0 2px 4px rgba(100,181,246,0.2));
    }
  }

  &:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 0;
    height: 1px;
    background: rgba(100,181,246,0.12);
  }
  
  &:active {
    background: rgba(100,181,246,0.08);
    transform: scale(0.98);
  }
  
  &.loading {
    pointer-events: none;
    opacity: 0.7;
    
    .uni-icons[type="right"] {
      animation: spin 1s linear infinite;
    }
  }
  
  &.disabled {
    pointer-events: none;
    opacity: 0.5;
  }
  
  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
  
  .setting-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    
    & > text:first-child {
      font-size: 16px;
      color: #1a1a1a;
    }
    
    .setting-desc {
      font-size: 12px;
      color: #666;
    }
  }
  
  & > switch {
    transform: scale(0.9);
    position: relative;
    z-index: 1;
    
    ::v-deep .uni-switch-input {
      background-color: #e0e0e0 !important;
      transition: all 0.3s ease;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      
      &::before {
        background-color: #fff !important;
        transition: all 0.3s ease;
        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      }
      
      &.uni-switch-input-checked {
        background-color: #64b5f6 !important;
        box-shadow: 0 2px 4px rgba(100,181,246,0.2);
        
        &::before {
          box-shadow: 0 2px 4px rgba(100,181,246,0.2);
        }
      }
    }
  }
  
.clear-btn {
    padding: 4px 12px;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #64b5f6, #90caf9);
    border-radius: 12px;
    border: none;
    outline: none;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
    box-shadow: 0 2px 8px rgba(100,181,246,0.2);
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(100,181,246,0.3);
    }
    
    &:active {
      transform: scale(0.95);
      box-shadow: 0 1px 4px rgba(100,181,246,0.2);
    }
  }
}

/* 夜间模式支持 */
@media (prefers-color-scheme: dark) {
  .settings {
    background: linear-gradient(180deg, rgba(100,181,246,0.05) 0%, #121212 100%);
    
    &::before {
      background: linear-gradient(180deg, rgba(100,181,246,0.1) 0%, rgba(100,181,246,0) 100%);
    }
  }
  
  .section-title {
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }
  
  .settings-list {
    background: rgba(30,30,30,0.96);
    border-color: rgba(100,181,246,0.25);
    box-shadow: 0 12px 48px rgba(0,0,0,0.3);
    
    &:hover {
      box-shadow: 0 16px 56px rgba(0,0,0,0.4);
    }
  }
  
  .setting-item {
    .setting-content {
      & > text:first-child {
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,0.2);
      }
      
      .setting-desc {
        color: #aaa;
      }
    }
    
    &::after {
      background: linear-gradient(135deg, 
        rgba(100,181,246,0.08) 0%,
        rgba(100,181,246,0.04) 50%,
        rgba(100,181,246,0.08) 100%
      );
    }
    
    &:not(:last-child)::after {
      background: rgba(100,181,246,0.25);
    }
    
    &:hover {
      background: rgba(100,181,246,0.08);
    }
    
    &:active {
      background: rgba(100,181,246,0.12);
    }
    
    & > switch {
      ::v-deep .uni-switch-input {
        background-color: #333 !important;
        
        &::before {
          background-color: #444 !important;
        }
        
        &.uni-switch-input-checked {
          background-color: #64b5f6 !important;
          box-shadow: 0 2px 4px rgba(100,181,246,0.3);
        }
      }
    }
    
    .clear-btn {
      background: linear-gradient(135deg, #64b5f6, #90caf9);
      box-shadow: 0 2px 8px rgba(100,181,246,0.3);
      
      &:hover {
        box-shadow: 0 4px 12px rgba(100,181,246,0.4);
      }
      
      &:active {
        box-shadow: 0 1px 4px rgba(100,181,246,0.3);
      }
    }
  }
}
</style>
